<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>半亩法塘 | 国经2503班</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="logo">
                <h1>半亩法塘</h1>
                <p class="subtitle">国经2503班</p>
            </div>
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#activities">活动</a></li>
                <li><a href="#gallery">相册</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <div class="hero-text">
                <h2 class="hero-title animate-fade-in">半亩方塘一鉴开</h2>
                <p class="hero-subtitle animate-fade-in-delay">天光云影共徘徊</p>
                <p class="hero-description animate-fade-in-delay-2">
                    国经2503班的温馨家园<br>
                    在这里记录我们的美好时光
                </p>
                <button class="btn-primary">探索更多</button>
            </div>
            <div class="hero-visual">
                <div class="floating-card card-1">
                    <h3>学业成长</h3>
                    <p>共同进步</p>
                </div>
                <div class="floating-card card-2">
                    <h3>友谊长存</h3>
                    <p>彼此陪伴</p>
                </div>
                <div class="floating-card card-3">
                    <h3>梦想启航</h3>
                    <p>未来可期</p>
                </div>
            </div>
        </div>
        <div class="scroll-indicator">
            <div class="mouse"></div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="about">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">关于我们</h2>
                <p class="section-subtitle">国经2503班的点点滴滴</p>
            </div>
            <div class="about-content">
                <div class="about-card">
                    <div class="card-icon">🎓</div>
                    <h3>专业学习</h3>
                    <p>在国经专业的学习路上，我们相互扶持，共同成长，追求知识的光明。</p>
                </div>
                <div class="about-card">
                    <div class="card-icon">💫</div>
                    <h3>团结友爱</h3>
                    <p>班级是一个温暖的大家庭，在这里我们建立了深厚的友谊和信任。</p>
                </div>
                <div class="about-card">
                    <div class="card-icon">🌈</div>
                    <h3>多彩生活</h3>
                    <p>学习之余，我们也有丰富多样的班级活动，让大学生活更加精彩。</p>
                </div>
                <div class="about-card">
                    <div class="card-icon">🚀</div>
                    <h3>未来展望</h3>
                    <p>承载着梦想与希望，我们正向着更美好的未来努力前行。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 活动展示 -->
    <section id="activities" class="activities">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">精彩活动</h2>
                <p class="section-subtitle">记录我们的美好瞬间</p>
            </div>
            <div class="activities-grid">
                <div class="activity-card" data-activity="academic">
                    <div class="activity-image-placeholder">📚</div>
                    <div class="activity-content">
                        <span class="activity-date">2025年</span>
                        <h3>学术研讨</h3>
                        <p>定期举行学术讨论，共同探讨专业知识，提升学术素养。</p>
                    </div>
                    <div class="activity-read-more">查看详情 →</div>
                </div>
                <div class="activity-card" data-activity="team">
                    <div class="activity-image-placeholder">🎉</div>
                    <div class="activity-content">
                        <span class="activity-date">2025年</span>
                        <h3>班级团建</h3>
                        <p>丰富的团建活动增进同学情谊，增强班级凝聚力。</p>
                    </div>
                    <div class="activity-read-more">查看详情 →</div>
                </div>
                <div class="activity-card" data-activity="sports">
                    <div class="activity-image-placeholder">🏆</div>
                    <div class="activity-content">
                        <span class="activity-date">2025年</span>
                        <h3>文体活动</h3>
                        <p>积极参与校内外各项文体竞赛，展现班级风采。</p>
                    </div>
                    <div class="activity-read-more">查看详情 →</div>
                </div>
            </div>
        </div>
    </section>

    <!-- 班级相册 -->
    <section id="gallery" class="gallery">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">班级相册</h2>
                <p class="section-subtitle">记录美好回忆</p>
            </div>
            <div class="gallery-grid">
                <div class="gallery-item">
                    <div class="image-placeholder">📸</div>
                    <div class="gallery-overlay">
                        <h3>班级合影</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <div class="image-placeholder">🎓</div>
                    <div class="gallery-overlay">
                        <h3>学习时光</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <div class="image-placeholder">🎊</div>
                    <div class="gallery-overlay">
                        <h3>欢乐时刻</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <div class="image-placeholder">🌱</div>
                    <div class="gallery-overlay">
                        <h3>成长足迹</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <div class="image-placeholder">🤝</div>
                    <div class="gallery-overlay">
                        <h3>友谊见证</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <div class="image-placeholder">✨</div>
                    <div class="gallery-overlay">
                        <h3>难忘瞬间</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系留言 -->
    <section id="contact" class="contact">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">留言板</h2>
                <p class="section-subtitle">分享你的想法与祝福</p>
            </div>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>联系信息</h3>
                    <div class="info-item">
                        <span class="info-icon">📧</span>
                        <div>
                            <p>班级邮箱</p>
                            <p class="info-value">guojing2503@example.com</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-icon">📱</span>
                        <div>
                            <p>联系方式</p>
                            <p class="info-value">QQ群：123456789</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <span class="info-icon">📍</span>
                        <div>
                            <p>班级地址</p>
                            <p class="info-value">某某大学 经济学院</p>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="您的姓名" required>
                        </div>
                        <div class="form-group">
                            <input type="email" placeholder="您的邮箱" required>
                        </div>
                        <div class="form-group">
                            <textarea placeholder="您的留言..." rows="6" required></textarea>
                        </div>
                        <button type="submit" class="btn-primary">发送留言</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>半亩法塘</h3>
                    <p>国经2503班的温馨家园</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#home">首页</a></li>
                        <li><a href="#about">关于</a></li>
                        <li><a href="#activities">活动</a></li>
                        <li><a href="#gallery">相册</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>关注我们</h4>
                    <div class="social-links">
                        <a href="#" class="social-link">微信</a>
                        <a href="#" class="social-link">QQ</a>
                        <a href="#" class="social-link">微博</a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 半亩法塘 | 国经2503班. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- 活动详情模态框 -->
    <div id="activityModal" class="modal">
        <div class="modal-content">
            <span class="modal-close">&times;</span>
            <div class="modal-header" id="modalHeader">
                <div class="modal-icon" id="modalIcon">📚</div>
                <h2 id="modalTitle">学术研讨</h2>
                <span class="modal-date" id="modalDate">2025年</span>
            </div>
            <div class="modal-body" id="modalBody">
                <p>加载中...</p>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
